<template>
    <a-tabs @change="changeTab">
        <a-tab-pane :key="1" tab="基础信息">
            <a-descriptions bordered :column="2">
                <a-descriptions-item label="最近上线时间">{{ parseTime(device.onlineTime) }}</a-descriptions-item>
                <a-descriptions-item label="最近离线时间">{{ parseTime(device.offlinelineTime) }}</a-descriptions-item>
                <a-descriptions-item label="4G信号强度"></a-descriptions-item>
                <a-descriptions-item label="断电报警"></a-descriptions-item>
                <a-descriptions-item label="二维码" :span="2">
                    <a-qrcode :value="deviceQr" />
                </a-descriptions-item>
            </a-descriptions>
        </a-tab-pane>
        <a-tab-pane :key="2" tab="端口">
            <BTable :columns="columns" :data="dataSource" :pagination="false">
                <template #status="{text}">{{ text == 1 ? '充电中' : '空闲' }}</template>
            </BTable>
        </a-tab-pane>
    </a-tabs>
    <div class="m-t-20">
        
    </div>
</template>
<script lang="ts" setup>
    import { parseTime } from '@/utils';
    import { getDeviceQrApi } from '@/api/system/PlatformData'
    import { computed, ref } from 'vue';
    import { portApi } from '@/api/devices/Device';
    import { PORT_NAME } from '@/constant';

    const props = defineProps<{
            device:any
    }>()

    const dataSource = ref<any[]>([])
    const initedPort = ref(false)
    

    const deviceQrReg = ref('')

    const deviceQr = computed(() => {
        return deviceQrReg.value.replace('$1', props.device.id)
    })

    getDeviceQrApi().then(res => {
        deviceQrReg.value = res.data
    })

    function changeTab(k) {
        if(k == 2 && !initedPort.value) {
            portApi(props.device.id).then(r => {
                const data = r.data
                const port:any = {}
                for(let i = 0; i < props.device.portCount; i ++) {
                    port.name = PORT_NAME[i + 1]
                    if(data) {
                        port.status = data.portStatus[i]
                        if(data.portData) {
                            port.power = data.portData[i][2]
                            port.current = data.portData[i][5]
                            port.voltage = data.portData[i][7]
                        }
                    }

                    dataSource.value.push(port)
                }
            })

            initedPort.value = true
        }
    }

    

    const columns = [
        {
            title: '端口',
            dataIndex: 'name',
        },
        {
            title: '状态',
            dataIndex: 'status',
        },
        {
            title: '功率(W)',
            dataIndex: 'power',
        },
        {
            title: '电流(A)',
            dataIndex: 'current',
        },
        {
            title: '电压(V)',
            dataIndex: 'voltage',
        },
    ]
    
</script>
